<template>
  <div>
    <v-chart :options="option" style="height:17vh;" />
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/line'
import 'echarts/lib/component/legendScroll'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

export default {
  components: {
    'v-chart': ECharts
  },
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    data(val) {
      console.log('shuishou')
      console.log(val)
      // let titles = []
      let yers = []
      let seriesData =  []
      for(let i = 0; i < val.length; i++) {
        // titles.push(val[i].name)
        yers.push(val[i].date_time)
        seriesData.push(val[i].num)
      }
      // this.option.legend.data = titles
      this.option.xAxis[0].data = yers
      this.option.series[0].data = seriesData
      console.log(this.data)
      console.log(this.option)
    }
  },
  mounted() {
    let option = {
      legend: {
          right: '60%',
          width: '40%',
          top: '-5%',
          textStyle: {
            color: '#ffffff',
            fontSize: '.5rem',
          },
          data: []
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      grid: {
          left: '1%',
          right: '1%',
          bottom: '1%',
          containLabel: true,
          height: "70%",
          width: "40%"
      },
      xAxis: [
          {
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                    color: "#fff",
                },
              },
              type: 'category',
              boundaryGap: false,
              data: [],
              axisLabel: {
              show: true,
              textStyle: {
                  fontSize: 8,
              }
          }
          }
      ],
      yAxis: [
          {
            splitLine:{show:  false }, //去除网格线
              axisLine: {  //这是x轴文字颜色
                lineStyle: {
                    color: "#fff",
                },
              },
              type: 'value',
              axisLabel: {
              show: true,
              textStyle: {
                  fontSize: 8,
              }
          }
          }
      ],
      series: [
          {
              // name: '搜索引擎',
              type: 'line',
              stack: '总量',
              label: {
                  normal: {
                      show: true,
                      position: 'top',
                      fontSize: '8px',
                      color: '#fff'
                  },
              },
              areaStyle: {},
              data: []
          }
      ]
  };
  this.option = option

  },
  data() {
    return {
      option: {}
    }
  }
}
</script>
